<template>
  <div class="home">
    <div>
      <van-search
        v-model="value"
        shape="round"
        background="#fcf"
        placeholder="请输入搜索关键词"
        @focus="onFocus"
      />
      <van-popup
        v-model="$store.state.popupShow"
        position="right"
        :style="{ height: '100%',width:'90%',background:'#efefef' }"
      >
        <SubPopup></SubPopup>
      </van-popup>
      <!-- 轮播图 -->
      <banner :bannerarr="bannerArr"></banner>

      <!-- 轮播图下的物品 -->
      <channel :channearr="channelArr"></channel>
    </div>

    <!-- 品牌制造商直供 -->
    <brand :brandListarr="brandListArr"></brand>

    <!-- 新品首发 -->
    <products :newGoodsListarr="newGoodsListArr"></products>

    <!-- 人气推荐 -->
    <popularity :hotGoodsListarr="hotGoodsListArr"></popularity>

    <!-- 专题精选 -->
    <selected :topicListarr="topicListArr"></selected>

    <!-- 类型列表 -->
     <div class="brand" v-for="item in categoryListArr" :key="item.id">
        <div class="brand_title">{{item.name}}</div>
        <categoryList :goodsListarr="item.goodsList"></categoryList>
    </div>
    <!-- <input type="text" v-model="value" /> -->
  </div>
</template>


<script>
// vh 代表视口高度, vw 代表视口宽度

import SubPopup from "../components/subPopup/SubPopup";

// 数据请求
import { GetHomeLists } from "@/request/api";

// 轮播图
import Banner from "@/components/home/Banner";
// 轮播图下物品
import Channel from "@/components/home/Channel";
// 品牌制造
import Brand from "@/components/home/Brand";
// 新品首发
import Products from "@/components/home/Products";
// 人气推荐
import Popularity from "@/components/home/Popularity";
// 专题精选
import Selected from "@/components/home/Selected";
// 类型列表
import CategoryList from "@/components/home/CategoryList";


export default {
  name: "Home",
  components: {
    SubPopup,
    Banner,
    Channel,
    Brand,
    Products,
    Popularity,
    Selected,
    CategoryList
  },
  data() {
    return {
      value: "",
      bannerArr: [], // 轮播图数组
      channelArr: [], // 轮播图下物品导航数组
      brandListArr:[], // 品牌制造商数组
      newGoodsListArr:[], // 新品首发数组
      hotGoodsListArr:[], // 人气推荐数组
      topicListArr:[], // 专题精选
      categoryListArr:[], // 类型列表
    };
  },
  methods: {
    // 聚焦首页搜索框时，打开popup
    onFocus() {
      // 调用mutations中的方法来改变state下的iptVal
      this.$store.commit("controlPopupShow", true);
    }
  },

  created() {
    GetHomeLists().then(res => {
      console.log(res);
      if (res.errno == 0) {
        // console.log(res.data.banner);
        this.bannerArr = res.data.banner;
        this.channelArr = res.data.channel;
        this.brandListArr = res.data.brandList;
        this.newGoodsListArr = res.data.newGoodsList;
        this.hotGoodsListArr = res.data.hotGoodsList;
        this.topicListArr = res.data.topicList;
        this.categoryListArr = res.data.categoryList;

        // console.log(this.brandListArr)
      }
    });
  },

  computed: {
    // value:{
    //   get(){
    //     return this.$store.state.iptVal
    //   },
    //   set(newVal){
    //     // 调用mutations中的方法来改变state下的iptVal
    //     this.$store.commit("iptValChange",newVal)
    //   }
    // }
  }
};
</script>

<style lang="less" scoped>
.home {
  // margin-bottom: 10px;
  background: #ebedf0eb;
  .brand {
    background-color: #fff;
    margin-bottom: 10px;
    .brand_title {
      text-align: center;
      height: 50px;
      line-height: 50px;
    }
  }
}

  
</style>